<template>
	<div style="--htmlLabelLeft: -20px; --htmlLabelBottom: 0">
		<DetailPage v-bind="detailConfig" :model="nowRowData" style="width: 100%; margin: 0 auto"></DetailPage>
		<div style="padding-left: 20px">
			<HtmlLabel title="证书信息"></HtmlLabel>
		</div>
		<CertificateInfo :nowRowData="nowRowData"></CertificateInfo>
		<div style="padding-left: 20px">
			<HtmlLabel title="离职/请假记录"></HtmlLabel>
		</div>
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="离职记录" name="DimissionManagement">
				
			</el-tab-pane>
			<el-tab-pane label="请假记录" name="LeaveManagement">
				
			</el-tab-pane>
		</el-tabs>
		
		<LeaveManagement  v-if="activeName=='LeaveManagement'" :nowRowData="nowRowData"></LeaveManagement>
		<DimissionManagement  v-if="activeName=='DimissionManagement'" :nowRowData="nowRowData"></DimissionManagement>
	</div>
</template>

<script setup lang="ts">
import DetailPage from '@/views/aplid/DetailPage/index.vue'
import DimissionManagement from './dimissionManagement/index.vue'
import LeaveManagement from './leaveManagement/index.vue'
import CertificateInfo from './Practitioners/index.vue'
import { uploadType } from '@/utils/util'

const props = defineProps<{
	nowRowData?: any
}>()
const activeName = ref('DimissionManagement')

let detailColumn = [
	{
		type: 'DividerHtml',
		labelPosition: 'top',
		position: 'center',
		modelValue: '员工信息',
		span: 24,
	},
	{ label: '员工姓名', prop: 'staffName', span: 8 },
	{ label: '身份证号', prop: 'idCard', span: 8 },
	{ label: '性别', prop: 'genderLabel', span: 8 },
	{
		label: '岗位类型',
		prop: 'postType',
		propName: 'postTypeLabel',
		type: 'remoteSelect',
		api: 'getDictItemList',
		code: 'POSITION_TYPE',
	},
	{
		label: '职业类型',
		prop: 'jobType',
		propName: 'jobTypeLabel',
		type: 'remoteSelect',
		api: 'getDictItemList',
		code: 'OCCUPATION_TYPE',
		span: 8,
	},
	{
		label: '聘用方式',
		prop: 'hireMode',
		propName: 'hireModeLabel',
		type: 'remoteSelect',
		api: 'getDictItemList',
		code: 'HIRE_MODE',
		span: 8,
	},
	{
		label: '入职时间',
		prop: 'entryDate',
		type: 'date',
		format: 'YYYY年MM月DD ',
		valueFormat: 'YYYY-MM-DD',
		span: 8,
	},
	{
		type: 'DividerHtml',
		labelPosition: 'top',
		position: 'center',
		modelValue: '入职信息',
		span: 24,
	},
	{
		label: '入职协议（劳动合同）',
		prop: 'laborContract',
		type: 'upload',
		fileType: uploadType.fileMetaType,
		listType: 'picture-card',
		labelPosition: 'top',
		showFileList: true,
		limit: 4,
		multiple: true,
		span: 24,
	},
	{ label: '办理人', prop: 'createUserName', span: 8 },
	{ label: '办理时间', prop: 'createTime', span: 8 },
]
const detailConfig = {
	inline: false,
	showBtn: true,
	labelPosition: 'top',
	column: detailColumn.map((item) => {
		if (item.type == 'DividerHtml') {
			item['custome'] = 'titleLabel'
		}
		return item
	}),
}
</script>

<style scoped></style>
